<template>
    <div class="container">
        <my-header></my-header>
        <el-main class="el-main">
            <el-card class="main-card" shadow="never">
                <!-- 面包屑 -->
                <el-breadcrumb separator="/" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>个人中心</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 菜单 -->
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">我的帖子</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">信息维护</template>
                            <el-menu-item index="2-1">修改密码</el-menu-item>
                    </el-submenu>
                </el-menu>
                <!-- 帖子列表 -->
                <el-table class="tableList"
                    style="width: 100%"
                    :data="postList"
                    v-if="activeIndex === '1'">
                    <el-table-column
                        prop="title"
                        label="帖子标题"
                        >
                        <template slot-scope="scope">
                            <router-link :to="'/detail?id='+scope.row.id+'&sectionName='+scope.row.boardname">{{scope.row.title}}</router-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="boardname"
                        label="所属板块"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        label="发布时间"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="author"
                        label="作者"
                        width="120">
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                    class="pagination"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange"
                    v-if="activeIndex === '1'">
                </el-pagination>
                <div v-if="activeIndex === '2-1'">
                    <!-- 修改密码 -->
                    <el-steps :active="active" align-center class="step-bar">
                        <el-step title="步骤1" description="填写旧密码"></el-step>
                        <el-step title="步骤2" description="输入新密码"></el-step>
                        <el-step title="步骤3" description="确认新密码"></el-step>
                    </el-steps>
                    <!-- 输入框 -->
                    <el-input placeholder="请输入旧密码" v-model="oldPassword" show-password v-if="active === 1" class="input"></el-input>
                    <el-input placeholder="请输入新密码" v-model="newPassword" show-password v-if="active === 2" class="input"></el-input>
                    <el-input placeholder="确认密码" v-model="confirmPassword" show-password v-if="active === 3" class="input"></el-input>
                    <!-- 下一步按钮 -->
                    <el-button type="primary" @click="handleNext" class="button" :disabled="nextDisabled">继续</el-button>
                </div>
            </el-card>
        </el-main>
    </div>
</template>

<script>
import MyHeader from "../../components/MyHeader"
import axios from 'axios'
import getUrl from "../../assets/js/getPath"

export default {
    name:"List",
    components:{
        MyHeader
    },
    data(){
        return{
            postList:[
                
            ],
            pageSize:8,
            currentPage:1,
            total:100,
            activeIndex: '1',
            active:1,
            oldPassword:'',
            newPassword:'',
            confirmPassword:'',
            nextDisabled :false
        }
    },
    computed:{
        length:function(){
            return this.$data.postList.length;
        }
    },
    watch:{
        // 每当页码发生改变，重新请求数据
        currentPage:function(){
            this.getPostList();
        }
    },
    methods:{
        handleCurrentChange:function(currentPage){
            this.currentPage = currentPage;
        },
        getPostList:async function(){
            let url = getUrl('myPost');
            const params = {
                'pagenum':this.currentPage
            }
            try{
                const {data:res} = await axios.get(url,{params:params});
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    this.postList = res.data.postlist;
                    this.total = res.data.total;
                    this.$message.success(res.meta.msg);
                }
            }catch(e){
                this.$message.error("请求出错");
            }
        },
        handleSelect:function(key, keyPath){
            this.activeIndex = key;
        },
        handleNext:async function(){
            if(this.active <= 3){
                this.active++;
            }
            if(this.active > 3){
                if(this.oldPassword === '' || this.newPassword === '' || this.confirmPassword === ''){
                    this.$message.error("输入项不能为空");
                    return this.active = 1;
                }else if( this.newPassword.length < 8){
                    this.$message.error("密码最小长度为8位！");
                    return this.active = 2;
                }else if(this.newPassword !== this.confirmPassword){
                    this.$message.error("两次输入的新密码不一致！");
                    return this.active = 2;
                }
                this.nextDisabled = true;
                const params = {
                    'oldPassword':this.oldPassword,
                    'newPassword':this.newPassword
                }
                console.log(params);
                let url = getUrl('changpwd');
                try{
                    const {data:res} = await axios.post(url,{params:params});
                    if(res.meta.status !== 200){
                        return this.$message.error(res.meta.msg);
                    }else if(res.data.res === 0){
                        this.$message.success('修改成功');
                    }else if(res.data.res === 1){
                        this.$message.error('您输入的旧密码有误，请重新输入！');
                        this.active = 1;
                        this.nextDisabled = false;
                        this.oldPassword = '';
                    }
                }catch(e){
                    this.$message.error("请求出错");
                }
            }
        }
    }
}
</script>


<style lang="scss" scoped>
.container,.el-main{
    width: 100%;
    background-color: #eee;
}
.main-card{
    width:80%;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}
.tableList{
    margin-top:20px;
}
.breadcrumb{
    margin-bottom:20px;
}
.pagination{
    margin-top:20px;
}
.image-container{
    width: 100%;
    text-align: center;
    margin-bottom:80px;
}
.error-image{
    width:300px;
    display: inline-block;
    margin: 0 auto;
    margin-top:100px;
}
h1{
    font-size: 20px;
}
.step-bar{
    margin-top:40px;
    margin-bottom:40px;
}
.input{
    width:200px;
    display: block;
    margin:0 auto;
}
.button{
    display: block;
    margin:0 auto;
    margin-top:30px;
}
</style>